import React, { useEffect, useState } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Menu } from 'antd';
import { menus } from '@/router/menus'

const SiderNav = (props) => {
      const [openKeys, setOpenKeys] = useState([]);
      const [selectedKeys, setSelectedKeys] = useState([]);

      useEffect(() => {
            // 刷新页面或直接通过url访问页面时自动处理菜单
            let pathname = props.location.pathname;
            // 获取当前所在的目录层级
            let rank = pathname.split('/');
            switch (rank.length) {
                  case 2: // 一级目录
                        setSelectedKeys(pathname)
                        break;
                  case 4: // 二级目录
                        setOpenKeys(rank.slice(0, 3).join('/'))
                        setSelectedKeys(pathname)
                        break;
                  case 5: // 三级目录，要展开两个subMenu
                        setOpenKeys(rank.slice(0, 3).join('/'), rank.slice(0, 4).join('/'))
                        setSelectedKeys(pathname)
                        break;
                  default:
                        setOpenKeys()
                        setSelectedKeys(pathname)
            }
            // 当点击面包屑导航时，侧边栏要同步响应
            // if (selectedKeys !== pathname) {
            //       setSelectedKeys(pathname)
            // }
      }, [openKeys, props.location.pathname, selectedKeys])

      const onOpenChange = (openKeys) => {
            // 此函数的作用只展开当前父级菜单（父级菜单下可能还有子菜单）
            if (openKeys.length === 0 || openKeys.length === 1) {
                  setOpenKeys(openKeys)
                  return;
            }

            // 最新展开的菜单
            let latestOpenKey = openKeys[openKeys.length - 1];
            // 判断最新展开的菜单是不是父级菜单，若是父级菜单就只展开一个，不是父级菜单就展开父级菜单和当前子菜单
            if (latestOpenKey.includes(openKeys[0])) {
                  setOpenKeys(openKeys)
            } else {
                  setOpenKeys({ openKeys: latestOpenKey })
            }
      }

      const renderSubMenu = ({ key, icon, title, subs }) => {
            return (
                  <Menu.SubMenu
                        key={key}
                        icon={icon}
                        title={(
                              <span>
                                    <span>{title}</span>
                              </span>
                        )}
                  >
                        {
                              subs.map((item) => {
                                    return item.subs && item.subs.length > 0
                                          ? renderSubMenu(item) : renderMenuItem(item);
                              })
                        }
                  </Menu.SubMenu>
            );
      }

      const renderMenuItem = ({ key, icon, title }) => {
            return (
                  <Menu.Item key={key} icon={icon}>
                        <Link to={key}>
                              <span>{title}</span>
                        </Link>
                  </Menu.Item>
            );
      }

      let defaultProps = props.collapsed ? {} : { openKeys };

      return (
            <div>
                  {
                        <Menu
                              {...defaultProps}
                              onOpenChange={onOpenChange}
                              onClick={({ key }) => setSelectedKeys({ selectedKeys: [key] })}
                              selectedKeys={selectedKeys}
                              theme="dark"
                              mode="inline"
                        >
                              {
                                    menus.map((item) => {
                                          return item.subs && item.subs.length > 0
                                                ? renderSubMenu(item) : renderMenuItem(item);
                                    })
                              }
                        </Menu>
                  }
            </div>
      )
}

export default withRouter(SiderNav);